<template>
    <div id="allpage">  
        <div id="topnav"></div>
        <div class="nav">
            <router-link to="/login" class="login">登录</router-link> 
            <router-link to="/register" class="register">注册</router-link>
            <router-link to="/forget" class="forget">忘记密码</router-link>
        </div>
        <div class="content">
              <div class="phone">
                <span class="iconfont icon-shouji"></span><input type="text" placeholder="请输入手机号" @blur="lostphone"><span v-bind:class='{tishi:tishi,iconfont:iconfont,"icon-duihaocheckmark17":istrue}'>{{msg}}</span>
            </div>
             <div class="phoneyzm">
                 <span class="iconfont icon-A"></span><input type="text" placeholder="请输入验证码" @blur="lostyzm"><span class="getyzm" @click="getyzm">{{getyzm1}}</span><span v-bind:class='{yzmtishi:yzmtishi,iconfont:iconfont2,"icon-duihaocheckmark17":istrue2}'>{{msg2}}</span>
            </div>
             <div class="phonepwd">
                 <span class="iconfont icon-A"></span><input type="password" placeholder="请输入密码" @blur="lostpwd"><span data-num1=0 class="iconfont icon-yanjing" @click="lookpwd"></span><span v-bind:class='{tishi:tishi1,iconfont:iconfont1,"icon-duihaocheckmark17":istrue1}'>{{msg1}}</span>
            </div>
            <div class="zhuyi">
                <div class="zuo">
                    <span class="iconfont icon-gantanhao"></span>
                    <span>由6-20个字母，数字和符号组成</span>    
                </div>
            </div>
            <div class="denglu" @click="zhuce">注册</div>
        </div>
      
        <router-view/>
    </div>
</template>
<script>
import axios from "axios"
export default {
   data(){
       return {
             msg:"",
            msg1:"",
            msg2:"",
            tishi:true,
            istrue:false,
            iconfont:false,
            tishi1:true,
            istrue1:false,
            iconfont1:false,
            num1:"0",
            getyzm1:"获取验证码",
            yzmtishi:true,
            istrue2:false,
            iconfont2:false
       }
   },
   methods:{
        lostphone:function(e){
            var  phonezz="^1[3|4|5|7|8][0-9]{9}$"
            var re=new RegExp(phonezz)
            console.log(e.currentTarget.value);
            if(re.test(e.currentTarget.value)){
                    this.msg=""
                    this.tishi=false
                    this.istrue=true
                    this.iconfont=true
            }else if(!e.currentTarget.value){
                this.msg = "手机号不能为空"
                this.tishi=true
                this.istrue=false
                this.iconfont=false
            }else{
                this.tishi=true
                this.istrue=false
                this.iconfont=false
                this.msg = "请输入正确的手机号"
            }
        },
        lostpwd:function(el){
            console.log(el.currentTarget.value);
            var pwdzz = "^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$"
            var re = new RegExp(pwdzz)
            if(re.test(el.currentTarget.value)){
                    this.msg1=""
                    this.tishi1=false,
                    this.istrue1=true,
                    this.iconfont1=true
            }else{
                   this.msg1="请输入正确格式的密码，包含数字和字母"
                    this.tishi1=true,
                    this.istrue1=false,
                    this.iconfont1=false
            }
        },
        lostyzm:function(e){
            // console.log("lostyzm");
            console.log(e.currentTarget.value);
            if(e.currentTarget.value == this.getyzm1){
                console.log(1111111);
                this.msg2 = ""
                 this.yzmtishi=false
                this.istrue2=true
                this.iconfont2=true
            }else{
                this.yzmtishi=true
                this.istrue2=false
                this.iconfont2=false
                this.msg2="请输入正确的验证码"
            }
        },
        lookpwd:function(e){
           console.log(e.currentTarget.dataset.num1);
            if(e.currentTarget.dataset.num1==0){
                e.currentTarget.parentElement.children[1].type = "text"
                e.currentTarget.dataset.num1=1
            }else{
                 e.currentTarget.parentElement.children[1].type = "password"
                 e.currentTarget.dataset.num1=0
            }
        },
        getyzm:async function(){
           var data =await axios("/login1/getyzm")
           this.getyzm1 = data.data
        },
        zhuce:async function(e){
            let phone = e.currentTarget.parentElement.children[0].children[1].value
            let yzm = e.currentTarget.parentElement.children[1].children[1].value
            let pwd =e.currentTarget.parentElement.children[2].children[1].value
            console.log(phone,pwd);
            let xiugai = await axios.post("/login1/zhuce",{"phone":phone,"pwd":pwd})
            alert("注册成功")
              window.location.href=`http://localhost:8080/login`
        }
    }
   
}
</script>
<style lang="scss" scoped>
*{
    margin: 0;
    padding: 0;
}

    #allpage{
        background: #f6f8fa;
        height: 950px;
    }
    #topnav{
        height: 100px;
    }
    .nav{
        text-align: center;
        padding-top:15px ;
    }
    .nav a{
        position: relative;
        text-decoration: none;
        padding: 15px 40px;
        margin: 0 30px;
        background-color: #f6f8fa;
        display: inline-block;
        font-size: 23px;
        color: #87959f;
    }
    .nav .register{
        background-color: white;
    }
     .nav .register::after{
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
        left: 100px;
        z-index: 999;
        width: 0;
        height: 0;
        border: 30px solid white;
        border-top: 30px solid #f6f8fa;
        border-right: 30px solid #f6f8fa;
    }
     .nav .register::before{
        content: "";
        display: inline-block;
        position: absolute;
        top: 0;
        left: -40px;
        z-index: 999;
        width: 0;
        height: 0;
        border: 30px solid white;
        border-top: 30px solid #f6f8fa;
        border-left: 30px solid #f6f8fa;
    }
    .content{
        width: 70%;
        height: 650px;
        margin: 0 auto;
        text-align: center;
        background-color: white;
        box-sizing: border-box;
    }
    .content div{
        padding-top: 40px;
    }
     .content div input{
        position: relative;
        top: -7px;
        height: 48px; 
        width: 26%;        
        border: 1px solid #dee8f3;  
        font-size: 24px;    
        text-indent: 50px;           
    }
    .content input:focus{
        outline: none;
         border: 1px solid skyblue;  
    }
    .content .phone{
        position: relative;
        padding-top: 130px;
    }
    .content .phonepwd{
        position: relative;
    }
    .content .phonepwd .icon-yanjing{
        position: absolute;
        top: 37px;
        left: 61%;
        z-index: 99;
    }
     .content .iconfont{
        position: relative;
        left: 50px;
        top: -3px;
        z-index: 999;
        color:skyblue;
        font-size: 30px;
        padding: 10px;

        border-right: 0;
    }
  .content .denglu{
        font-size: 25px;
        padding: 10px 0 ;
        background-color: skyblue;
        width: 28%;
        margin:0 auto;
        margin-top: 40px;
        margin-left: 38%;

    }
     .content div{
        padding-top: 40px;
    }
    .content .phone{
        line-height: 50px;
    }
    .content .phone .tishi{
        position: absolute;
        top: 68%;
        left: 66%;
        z-index: 999;
        color: red;
    }
    .content .phone .icon-duihaocheckmark17{
        position: absolute;
        top: 64%;
        left: 66%;
        z-index: 999;
    }
    .content input{
        position: relative;
        top: -7px;
        height: 48px; 
        width: 26%;        
        border: 1px solid #dee8f3;  
        font-size: 24px;    
        text-indent: 50px;           
    }
    .content input:focus{
        outline: none;
         border: 1px solid skyblue;  
    }
    .content .phoneyzm{
        position: relative;
    }
    .content .phoneyzm .getyzm{
        position: absolute;
        top: 50%;
        left: 56%;
        z-index: 99;
        font-size: 20px;
        color: rgb(91, 192, 231);
    }
    .content .zhuyi{
        padding-top: 0;
        color: #95a8b9;
        margin-top: -35px;
    }
    .content.zhuyi div{
        padding-top: 0;
    }
     .content .zhuyi .icon-gantanhao{
        position: relative;
        top: 0;
        left: -10px;
        font-size: 15px;
        color: #95a8b9;
    }
    .content ::-webkit-input-placeholder{
        font-size: 18px;
    }
    .content .phoneyzm .yzmtishi{
        position: absolute;
        top:53%;
        left: 66%;
        z-index: 999999;
        color: red;
    }
    .content .phoneyzm .icon-duihaocheckmark17{
    position: absolute;
    z-index: 999;
    left: 66%;
    top: 42%;
    color: greenyellow;
    }
    .content .phonepwd .tishi{
        position: absolute;
        top: 53%;
        left: 66%;
        z-index: 999;
        color: red;
    }
    .content .phonepwd .icon-duihaocheckmark17{
    position: absolute;
    z-index: 999;
    left: 66%;
    top: 42%;
    color: greenyellow;
    }
     .content .phone .icon-duihaocheckmark17{
    color: greenyellow;
    }
</style>